<!-- 报表统计 -->
<template>
  <div class="navigation">
    <div class="navigation-content">
      <div v-for="(item, index) in titleList" :key="index" class="menu-column">
        <el-button type="primary" @click="gotoPath(index)">{{ item.button }}</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getAction } from '@/api/manage'
import Vue from 'vue'
import { handlePermissions, handlePagePermissions, handleOtherPerms } from '@/utils'
export default {
  components: {},
  name: 'shopManage',
  data() {
    return {
      path: '/shopManage',
      titleList: [
        {
          title: '网店商品上下架',
          subTitle1: '商城商品信息编辑',
          subTitle2: '上下架设置',
          icon: 'el-icon-s-goods',
          button: '去设置',
        },
        {
          title: '网店营销、数据统计',
          subTitle1: '商城网店装修、会员管理',
          subTitle2: '营销活动、数据统计设置',
          icon: 'el-icon-s-data',
          button: '设置',
        },
      ],
    }
  },
  methods: {
    gotoPath(index) {
      if (index === 0) {
        this.$router.push({ path: '/shopManage/onlineShopGoods' })
      } else if (index === 1) {
        window.open('https://www.baidu.com/')
      }
    },
  },
}
</script>

<style lang="less" scoped>
/* 导航容器 */
.navigation {
  height: 100%;
  padding-bottom: 16px;
  background-color: #dbdbdb;
  display: flex;
  align-items: center;
  justify-content: center;

  .navigation-content {
    display: flex;
    gap: 100px;
    padding: 150px;
    overflow: auto;

    .menu-column {
      width: 184px;
      height: 237px;
      background-color: #fff;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 10px 10px 4px 4px;

      .menu-header {
        height: 65px;
        line-height: 65px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        border-radius: 10px 10px 0px 0px;
      }

      .menu-body {
        padding: 30px;

        .menu-item {
          cursor: pointer;
          display: flex;
          align-items: baseline;
          font-size: 15px;
          color: #666666;
          // padding: 7px 0;
          margin-bottom: 13px;
        }
        // 最后一个menu-item的下边距
        .menu-item:last-child {
          margin-bottom: 0;
        }

        /* 分割线样式 */
        .ant-divider {
          margin: 15px 0;
          background: #e8e8e8;
        }
      }
    }
  }
}

/* 各个统计的头部颜色 */
.sales .menu-header {
  background: linear-gradient(180deg, #3ea1ff 0%, #005eb7 100%);
}

.purchase .menu-header {
  background: linear-gradient(180deg, #4beab3 0%, #00a7a0 100%);
}

.inventory .menu-header {
  background: linear-gradient(180deg, #fbad19 0%, #ff6200 100%);
}

.finance .menu-header {
  background: linear-gradient(180deg, #fc6c6c 0%, #fd3131 100%);
}
.yuan {
  width: 10px;
  height: 10px;
  // background: linear-gradient( 180deg, #FC6C6C 0%, #FD3131 100%);
  border-radius: 50%;
  margin-right: 10px;
}
/* 统计项颜色 */
.sales .yuan {
  background: linear-gradient(180deg, #3ea1ff 0%, #005eb7 100%);
}

.purchase .yuan {
  background: linear-gradient(180deg, #4beab3 0%, #00a7a0 100%);
}

.inventory .yuan {
  background: linear-gradient(180deg, #fbad19 0%, #ff6200 100%);
}

.finance .yuan {
  background: linear-gradient(180deg, #fc6c6c 0%, #fd3131 100%);
}
</style>
